<template>
  <div>
    <a-button v-if="showBtn" @click="visible=true">
      <i class="fa fa-file-o mr5"></i>管理附件
    </a-button>
    <ZgDialog v-model="showAdd" @ok="onAdd">
      <ZgUpFile :accept="currAttAccept" v-model="fileList"></ZgUpFile>
    </ZgDialog>
    <ZgDrawer
      width="80%"
      v-model="visible">
      <ZgNewPage
        ref="page"
        title="附件管理"
        :extraHeight="attTypeArr.length>0?365:310"
        :addBtnName="addBtnName"
        addBtnIcon="upload"
        :batchBtns="batchBtns"
        :dataBtns="dataBtns"
        :pageOpt="pageOpt"
        @search="onSearch"
        @add="toAdd"
        @batch="toBatch"
        @admin="toAdmin">
        <template slot="tabs">
          <a-tabs size="small" type="card" v-if="attTypeArr.length>0" v-model="currAttType">
            <a-tab-pane key="all" tab="全部"></a-tab-pane>
            <a-tab-pane
              v-for="t in attTypeArr"
              :key="t.name"
              :tab="t.name">
            </a-tab-pane>
          </a-tabs>
        </template>
        <template slot="thMode" slot-scope="scope">
          <a-row :gutter="10">
            <a-col :span="4" v-for="(t,i) in scope.list" :key="i">
              <div class="wfull mb30 block" @click="toViewFile(t.filePath)">
                <div class="flx-c">
                  <ZgImgHolder v-if="isImage(t.fileName)" :src="t.filePath" :width="80" :height="80"></ZgImgHolder>
                  <img v-else :src="getFileIcon(t.fileName)" class="w80 h80"/>
                </div>
                <div class="h40 tac pd10">{{ t.fileName }}</div>
              </div>
            </a-col>
          </a-row>
        </template>
        <template slot="columns">
          <a-table-column :width="200" title="附件名称">
            <template slot-scope="text,record">
              <div class="flx-s">
                <ZgImgHolder class="mr10" v-if="isImage(record.fileName)" :src="record.filePath" :width="30" :height="30"></ZgImgHolder>
                <img v-else :src="getFileIcon(record.fileName)" class="w30 h30 mr10"/>
                <div class="flx-s link" @click="toViewFile(record.filePath)">
                  {{ record.fileName }}
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column :width="150" title="附件大小">
            <template slot-scope="text,record">
              {{ getFileSize(record.fileSize) }}
            </template>
          </a-table-column>
          <a-table-column :width="100" title="上传用户" dataIndex="createBy"></a-table-column>
          <a-table-column :width="160" title="上传时间" dataIndex="createTime"></a-table-column>
          <a-table-column title="存储路径">
            <template slot-scope="text,record">
              {{ record.filePath }}
            </template>
          </a-table-column>
        </template>
      </ZgNewPage>
    </ZgDrawer>
  </div>
</template>
<script>
import { getFileSize, getFileIcon, isImage } from '@/core/file.js'
export default {
  props: {
    attTypeArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableName: {
      type: String,
      default: 'default'
    },
    tableId: {
      type: String,
      default: '0'
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      pageOpt: {
        // 查询功能
        showSearchBtn: true,
        // 刷新功能
        showRefreshBtn: true,
        // 筛选功能
        showConditionBtn: false,
        // 表头设置功能
        showHeaderConfig: false,
        // 布局模式设置功能
        showLayoutMode: true
      },
      batchBtns: [
        { key: 1, label: '批量删除' },
        { key: 2, label: '批量修改' },
        { key: 3, label: '数据排序' }
      ],
      dataBtns: [
        { key: 1, name: '删除', type: 'primary', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '下载', type: 'download', icon: 'fa-download', isShow: () => { return true } }
      ],
      showAdd: false,
      showUpload: false,
      visible: false,
      addBtnName: '上传附件',
      currAttType: 'all',
      currAttAccept: '.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,mp3,mp4,.zip,.rar,.png,.jpg,.jpeg,.gif',
      fileList: [],
      dataId: this.tableId
    }
  },
  watch: {
    currAttType (v) {
      this.$refs.page.page = 1
      const param = this.$refs.page.getPageParam()
      this.onSearch(param)
      if (v === 'all') {
        this.addBtnName = '上传附件'
        this.currAttAccept = '.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,mp3,mp4,.zip,.rar,.png,.jpg,.jpeg,.gif'
      } else {
        const arr = this.attTypeArr.filter(t => {
          return t.name === v
        })
        if (arr.length === 1) {
          this.addBtnName = `上传${arr[0].name}`
          this.currAttAccept = arr[0].type
        }
      }
    },
    dataId () {
      this.$refs.page.page = 1
      const param = this.$refs.page.getPageParam()
      this.onSearch(param)
    }
  },
  methods: {
    getFileSize,
    getFileIcon,
    isImage,
    open (json) {
      this.dataId = json.id
      this.visible = true
    },
    onSearch (param) {
      this.$http.get('/zg-system/attach/page',
        Object.assign({
          code: this.currAttType,
          tableName: this.tableName,
          tableId: this.dataId
        }, param),
        data => {
          this.$refs.page.endSearch(
            {
              total: parseInt(data.total),
              list: data.records.map(t => {
                t.key = t.id
                return t
              })
            }
          )
        })
    },
    toAdd () {
      this.showAdd = true
      // 重置文件列表
      this.fileList = []
    },
    onAdd () {
      const arr = this.fileList.filter(t => {
        return t.path && t.path.length > 0
      })
      if (arr.length === 0) {
        this.$error({ title: '请上传文件' })
        return
      }
      const param = arr.map(t => {
        return {
          code: this.currAttType,
          fileName: t.name,
          fileSize: t.size,
          filePath: t.path,
          tableName: this.tableName,
          tableId: this.dataId
        }
      })
      this.$http.post('/zg-system/attach/add', param, () => {
        this.showAdd = false
        this.$refs.page.search()
      })
    },
    toBatch (opt) {
      if (opt.key === 1) {
        this.$refs.page.checkIds(ids => {
          this.$http.post('del-url', ids, () => {
            this.search()
          })
        }, '确定要批量删除这些数据')
      } else if (opt.key === 2) {
        this.$refs.page.checkIds(ids => {
          this.$refs.batch.open(ids)
        }, '确定要批量修改这些数据')
      } else if (opt.key === 3) {
        const list = this.$refs.page.getList()
        this.$refs.sort.open(list)
      }
    },
    toAdmin (param) {
      if (param.key === 1) {
        this.confirm(
        () => {
          this.$http.post('/zg-system/attach/del', [param.obj.id], () => {
            this.$refs.page.search()
          })
        },
        '确定要删除这条数据么')
      } else if (param.key === 2) {
        this.$http.download('/zg-system/file/download', { id: param.obj.id }, param.obj.fileName)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.block{
  padding:15px 0;
  &:hover{
    background:#f2f2f2;
    cursor:pointer;
  }
}
</style>
